// 由三部分组成，模板，行为，样式
<template>
    <div class="login_container" >
        <!-- 登录框 -->
        <div class="login_box">
            <!-- 头像区 -->
            <div class="avater_box">
                <img src="../assets/logo.png" alt="">
            </div>
            <!-- 登录表单区 -->
            <!-- ref属性是为了给出一个引用对象，只能能获得这个ref的值就能拿到这个表单的对象，可以通过调用表单方法，进行重置 -->
            <el-form  ref="loginFormRef"  class="login_form" label-width="0px" :model="loginForm" :rules="loginFormRules">
                <!-- lable是左侧提示文本，不需要就删掉，但是删掉，lable的区域还在，因为el-form定义了label的宽度 -->
                <el-form-item prop="username">
                    <!-- iconfont这个类名是基础类名，一定要有，剩下的是对应的图标的类名 -->
                    <el-input v-model="loginForm.username" prefix-icon= "iconfont icon-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                     <!-- 增加个type，让密码隐仓 -->
                    <el-input v-model="loginForm.password" type="password" prefix-icon= "iconfont icon-3702mima"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login" >登录</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
// 自动补齐
export default {
    // 为什么此处的data是一个函数，而不是对象
    // 将data设置为一个函数，该函数会返回一个初始数据对象
    // 用function return 其实就相当于申明了新的变量，相互独立
    data(){
        return{
            loginForm:{
                username:'',
                password:''
            },
            loginFormRules:{
                // 验证用户名是否合法
                username:[
                     { required: true, message: '请输入用户名', trigger: 'blur' },
                     { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
                ],
                // 验证密码是否合法
                password:[
                   { required: true, message: '请输入密码', trigger: 'blur' },
                   { min: 6, max: 15, message: '长度在 6 到 15字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        // 点击重置按钮重置表单数据
        resetLoginForm(){
            // 通过打印this对象发现里面有个$refs对象，是表单的引用，通过访问这个对象里面发现其属性值就是我们设置的ref
            console.log(this);
            this.$refs.loginFormRef.resetFields();
        },

        login(){
            // 通过获得引用对象从而调用表单的方法validata，进行表单验证
            // 箭头函数只有一个形参时，可以省略括号，此处可以省略valid那个括号
            // 预验证
            this.$refs.loginFormRef.validate(async (valid)=>{
                // 此处打印valid是一个Boolean值，如果符合规则是true，不符合是false
                // console.log(!valid);
                if(!valid) return;
                // loginForm也存储了表单的值，因为是双向绑定的
                // 此时要保证API服务器是运行状态
                // 用了await要在它紧接着的那个方法上加入async关键词
                // login要加双引号
                const {data:res}=await this.$http.post("login",this.loginForm);
                // // 如果不加wait，打印出来是个promise的数据，可以用await async来简化这次promise操作
                // // 然后返回的是具体响应对象，然后可以通过解构的方式获取响应对象的data
                // console.log(res);
                if(res.meta.status!==200) return this.$message.error("登陆失败");
                this.$message.success("登陆成功");
                // 登录成功后会返回一些列数据，可以从数据中获得token
                // 1.将项目成功之后的token，保存到客户端的sessionStorage（会话期间）中（不用local是因为local是长久的）
                    // 1.1 项目中除了登录之外的其他API接口，必须再登陆之后才可以访问
                    // 1.2 token在当前网站打开期间生效，所以将token保存再sessionStorage中
                // 2.通过编程式导航跳转到后台主页，路由地址是/home
                console.log(res);
                window.sessionStorage.setItem('token',res.data.token);
                this.$router.push('/home');
            })
        }
    }
}
</script>
<style lang='less' scoped>
/* scoped是只在当前组件生效 */
/* 最好不影响别人 */
.login_container{
    background-color: #2b4b6b;
    height: 100%;
}
.login_box{
    width: 450px;
    height: 300px;
    background-color: #ffffff;
    // 圆角
    border-radius: 3px;
    // 让元素居中对齐,前提要给他定位
    position:absolute;
    // 先挪容器的一半
    left: 50%;
    top: 50%;
    // 再挪自身的一半
    transform: translate(-50%,-50%);
    .avater_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eeeeee;
        // 加圆角效果
        border-radius: 50%;
        // 让里面的img元素与外面的边有一定的距离
        padding: 10px;
        // 此时边框是小于图片的，所以也要去图片加圆角
        // 加阴影，第一二个参数是必选的，是水平和垂直方向的阴影位置，第三个阴影大小，第四个颜色
        box-shadow: 0 0 10px #dddddd;
        // 让这个盒子位于父盒子居中的位置，向右移动父盒子一半距离，向上移动自身距离的一半
        position:absolute;
        // transform: translate();
        right: 50%;
        transform: translate(50%,-50%);
        // 再加个白色的背景比较好看
        background: #ffffff;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #eeeeee;
        }
    }
    
}
// 让整个表单到底部
// 此时通过检查发现，这个表单并没有占满整个容器的宽度
.login_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    // 此时input文本区会超出登录框
    // 因为form表单是box-size为content
    // 此时就不会因为padding导致的超出问题
    box-sizing:border-box;
}
.btns{
    // 定义布局
    display: flex;
    // flex-end居右对齐，flex-start居左对齐
    justify-content: flex-end;

}
</style>